<!--
 * @Author: your name
 * @Date: 2022-01-08 16:10:01
 * @LastEditTime: 2022-01-09 16:49:06
 * @LastEditors: 晋龍
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \project_am-master\am-dashboard\src\pages\m2\components\Map_gaode.vue
-->
<template>
  <div ref="map_container" style="height: 95%"></div>
</template>

<script>
import { get } from "../../../utils/request";

export default {
  data() {
    return {};
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      var map = new AMap.Map(this.$refs.map_container, {
        zoom: 11, //级别
        center: [112.583804, 37.423954], //中心点坐标
        viewMode: "3D", //使用3D视图
      });
      let polygons = [];
      var opts = {
        subdistrict: 0, //获取边界不需要返回下级行政区
        extensions: "all", //返回行政区边界坐标组等具体信息
        level: "district", //查询行政级别为 市
      };
      let district = new AMap.DistrictSearch(opts);
      district.setExtensions("all");
      district.search("太谷区", function (status, result) {
        map.remove(polygons); //清除上次结果
        polygons = [];
        var bounds = result.districtList[0].boundaries;
        if (bounds) {
          for (var i = 0, l = bounds.length; i < l; i++) {
            //生成行政区划polygon
            var polygon = new AMap.Polygon({
              strokeWeight: 5,
              path: bounds[i],
              fillOpacity: 0.4,
              fillColor: "#80d8ff",
              strokeColor: "#0091ea",
            });
            polygons.push(polygon);
          }
        }
        map.add(polygons);
        map.setFitView(polygons); //视口自适应
      });

      let url = "/dashboard/findEngineerDeviceTree";
      get(url).then((res) => {
        let edTree = res.data;
        let devices = [];
        edTree.forEach((item) => {
          devices.push(...item.children);
        });

        console.log(devices);

        devices.forEach((item) => {
          //打点
          // 创建一个 Marker 实例：
          var marker = new AMap.Marker({
            position: item.position, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: item.name,
          });
          map.add(marker);
        });
        
      });
    },
  },
};
</script>

<style>
</style>